<template>
  <div class="purchase-inbound-management">
    <!-- 页面标题 -->
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold text-gray-800">采购入库管理</h1>
      <el-button type="primary" @click="handleAdd" :icon="Plus">
        新建入库单
      </el-button>
    </div>

    <!-- 搜索表单 -->
    <el-card class="mb-6">
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="入库单号">
          <el-input
            v-model="searchForm.inboundNo"
            placeholder="请输入入库单号"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="采购订单">
          <el-input
            v-model="searchForm.orderNo"
            placeholder="请输入采购订单号"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="searchForm.supplierId" placeholder="请选择供应商" clearable style="width: 200px">
            <el-option
              v-for="supplier in supplierOptions"
              :key="supplier.id"
              :label="supplier.name"
              :value="supplier.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入库状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 150px">
            <el-option label="待入库" value="pending" />
            <el-option label="部分入库" value="partial" />
            <el-option label="已入库" value="completed" />
            <el-option label="已取消" value="cancelled" />
          </el-select>
        </el-form-item>
        <el-form-item label="入库日期">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" :icon="Search">
            搜索
          </el-button>
          <el-button @click="handleReset" :icon="Refresh">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 入库单列表 -->
    <el-card>
      <el-table :data="inboundList" v-loading="loading" stripe>
        <el-table-column prop="inboundNo" label="入库单号" width="150" />
        <el-table-column prop="orderNo" label="采购订单号" width="150" />
        <el-table-column prop="supplierName" label="供应商" min-width="150" />
        <el-table-column prop="totalAmount" label="入库金额" width="120">
          <template #default="{ row }">
            <span class="text-green-600 font-semibold">¥{{ row.totalAmount.toLocaleString() }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusLabel(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="qualityStatus" label="质检状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getQualityStatusType(row.qualityStatus)">{{ getQualityStatusLabel(row.qualityStatus) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="warehouseName" label="入库仓库" width="120" />
        <el-table-column prop="createUser" label="创建人" width="100" />
        <el-table-column prop="inboundDate" label="入库日期" width="120" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="240" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleView(row)" :icon="View">
              查看
            </el-button>
            <el-button 
              v-if="row.status === 'pending'"
              type="warning" 
              size="small" 
              @click="handleEdit(row)" 
              :icon="Edit"
            >
              编辑
            </el-button>
            <el-button 
              v-if="row.status === 'pending'"
              type="success" 
              size="small" 
              @click="handleConfirm(row)" 
              :icon="Check"
            >
              确认入库
            </el-button>
            <el-button 
              type="info" 
              size="small" 
              @click="handleQuality(row)" 
              :icon="Document"
            >
              质检
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="flex justify-center mt-6">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 新增/编辑入库单对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="1200px"
      @close="handleDialogClose"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="inbound-form"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="入库单号" prop="inboundNo">
              <el-input v-model="form.inboundNo" placeholder="系统自动生成" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购订单" prop="orderNo">
              <el-select v-model="form.orderNo" placeholder="请选择采购订单" style="width: 100%" @change="handleOrderChange">
                <el-option
                  v-for="order in orderOptions"
                  :key="order.orderNo"
                  :label="`${order.orderNo} - ${order.supplierName}`"
                  :value="order.orderNo"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库仓库" prop="warehouseId">
              <el-select v-model="form.warehouseId" placeholder="请选择仓库" style="width: 100%">
                <el-option
                  v-for="warehouse in warehouseOptions"
                  :key="warehouse.id"
                  :label="warehouse.name"
                  :value="warehouse.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="供应商">
              <el-input v-model="form.supplierName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库日期" prop="inboundDate">
              <el-date-picker
                v-model="form.inboundDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经办人" prop="handler">
              <el-input v-model="form.handler" placeholder="请输入经办人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input
            v-model="form.remark"
            type="textarea"
            :rows="2"
            placeholder="请输入备注信息"
          />
        </el-form-item>
        
        <!-- 入库明细 -->
        <div class="inbound-details">
          <h3 class="text-lg font-semibold mb-4">入库明细</h3>
          <el-table :data="form.items" border>
            <el-table-column prop="productCode" label="商品编码" width="120" />
            <el-table-column prop="productName" label="商品名称" min-width="150" />
            <el-table-column prop="specification" label="规格" width="100" />
            <el-table-column prop="unit" label="单位" width="80" />
            <el-table-column prop="orderQuantity" label="订单数量" width="100" />
            <el-table-column prop="inboundQuantity" label="入库数量" width="120">
              <template #default="{ row, $index }">
                <el-input-number
                  v-model="row.inboundQuantity"
                  :min="0"
                  :max="row.orderQuantity"
                  :precision="2"
                  @change="calculateItemAmount($index)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="unitPrice" label="单价" width="120">
              <template #default="{ row }">
                ¥{{ row.unitPrice.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="金额" width="120">
              <template #default="{ row }">
                <span class="text-green-600 font-semibold">¥{{ row.amount.toLocaleString() }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="qualityStatus" label="质检状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getQualityStatusType(row.qualityStatus)" size="small">
                  {{ getQualityStatusLabel(row.qualityStatus) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          <div class="total-amount mt-4 text-right">
            <span class="text-lg font-bold">入库总金额: </span>
            <span class="text-xl text-green-600 font-bold">¥{{ totalAmount.toLocaleString() }}</span>
          </div>
        </div>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
          保存
        </el-button>
      </template>
    </el-dialog>

    <!-- 入库单详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="入库单详情"
      width="1000px"
    >
      <div v-if="currentInbound">
        <!-- 基本信息 -->
        <el-descriptions title="基本信息" :column="3" border>
          <el-descriptions-item label="入库单号">{{ currentInbound.inboundNo }}</el-descriptions-item>
          <el-descriptions-item label="采购订单号">{{ currentInbound.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="供应商">{{ currentInbound.supplierName }}</el-descriptions-item>
          <el-descriptions-item label="入库金额">
            <span class="text-green-600 font-semibold">¥{{ currentInbound.totalAmount.toLocaleString() }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="入库状态">
            <el-tag :type="getStatusType(currentInbound.status)">{{ getStatusLabel(currentInbound.status) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="质检状态">
            <el-tag :type="getQualityStatusType(currentInbound.qualityStatus)">{{ getQualityStatusLabel(currentInbound.qualityStatus) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="入库仓库">{{ currentInbound.warehouseName }}</el-descriptions-item>
          <el-descriptions-item label="经办人">{{ currentInbound.handler }}</el-descriptions-item>
          <el-descriptions-item label="入库日期">{{ currentInbound.inboundDate }}</el-descriptions-item>
          <el-descriptions-item label="创建人">{{ currentInbound.createUser }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ currentInbound.createTime }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="3">{{ currentInbound.remark || '无' }}</el-descriptions-item>
        </el-descriptions>

        <!-- 入库明细 -->
        <div class="mt-6">
          <h3 class="text-lg font-semibold mb-4">入库明细</h3>
          <el-table :data="currentInbound.items" border>
            <el-table-column prop="productCode" label="商品编码" width="120" />
            <el-table-column prop="productName" label="商品名称" min-width="150" />
            <el-table-column prop="specification" label="规格" width="100" />
            <el-table-column prop="unit" label="单位" width="80" />
            <el-table-column prop="orderQuantity" label="订单数量" width="100" />
            <el-table-column prop="inboundQuantity" label="入库数量" width="100" />
            <el-table-column prop="unitPrice" label="单价" width="120">
              <template #default="{ row }">
                ¥{{ row.unitPrice.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="金额" width="120">
              <template #default="{ row }">
                <span class="text-green-600 font-semibold">¥{{ row.amount.toLocaleString() }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="qualityStatus" label="质检状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getQualityStatusType(row.qualityStatus)" size="small">
                  {{ getQualityStatusLabel(row.qualityStatus) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>

    <!-- 质检记录对话框 -->
    <el-dialog
      v-model="qualityDialogVisible"
      title="质检记录"
      width="800px"
    >
      <div v-if="currentInbound">
        <el-form :model="qualityForm" label-width="120px">
          <el-form-item label="质检人员">
            <el-input v-model="qualityForm.inspector" placeholder="请输入质检人员" />
          </el-form-item>
          <el-form-item label="质检日期">
            <el-date-picker
              v-model="qualityForm.inspectionDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="质检结果">
            <el-radio-group v-model="qualityForm.result">
              <el-radio label="pass">合格</el-radio>
              <el-radio label="fail">不合格</el-radio>
              <el-radio label="partial">部分合格</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="质检说明">
            <el-input
              v-model="qualityForm.remark"
              type="textarea"
              :rows="3"
              placeholder="请输入质检说明"
            />
          </el-form-item>
        </el-form>
        
        <!-- 商品质检明细 -->
        <div class="mt-4">
          <h4 class="text-md font-semibold mb-2">商品质检明细</h4>
          <el-table :data="qualityForm.items" border size="small">
            <el-table-column prop="productName" label="商品名称" min-width="150" />
            <el-table-column prop="inboundQuantity" label="入库数量" width="100" />
            <el-table-column label="质检状态" width="120">
              <template #default="{ row, $index }">
                <el-select v-model="row.qualityStatus" size="small">
                  <el-option label="待质检" value="pending" />
                  <el-option label="合格" value="pass" />
                  <el-option label="不合格" value="fail" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="质检备注" min-width="150">
              <template #default="{ row, $index }">
                <el-input v-model="row.qualityRemark" size="small" placeholder="质检备注" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <el-button @click="qualityDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleQualitySubmit" :loading="qualityLoading">
          保存质检记录
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus,
  Search,
  Refresh,
  Edit,
  Delete,
  View,
  Check,
  Document
} from '@element-plus/icons-vue'

// 响应式数据
const loading = ref(false)
const submitLoading = ref(false)
const qualityLoading = ref(false)
const dialogVisible = ref(false)
const detailDialogVisible = ref(false)
const qualityDialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref()
const currentInbound = ref(null)

// 搜索表单
const searchForm = reactive({
  inboundNo: '',
  orderNo: '',
  supplierId: '',
  status: '',
  dateRange: []
})

// 入库单表单
const form = reactive({
  id: null,
  inboundNo: '',
  orderNo: '',
  supplierName: '',
  warehouseId: '',
  inboundDate: '',
  handler: '',
  remark: '',
  items: []
})

// 质检表单
const qualityForm = reactive({
  inspector: '',
  inspectionDate: '',
  result: 'pass',
  remark: '',
  items: []
})

// 表单验证规则
const rules = {
  orderNo: [
    { required: true, message: '请选择采购订单', trigger: 'change' }
  ],
  warehouseId: [
    { required: true, message: '请选择入库仓库', trigger: 'change' }
  ],
  inboundDate: [
    { required: true, message: '请选择入库日期', trigger: 'change' }
  ],
  handler: [
    { required: true, message: '请输入经办人', trigger: 'blur' }
  ]
}

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 入库单列表
const inboundList = ref([])

// 供应商选项
const supplierOptions = ref([
  { id: 1, name: '北京科技有限公司' },
  { id: 2, name: '上海制造集团' },
  { id: 3, name: '广州贸易公司' }
])

// 采购订单选项
const orderOptions = ref([
  { orderNo: 'PO202401150001', supplierName: '北京科技有限公司' },
  { orderNo: 'PO202401200002', supplierName: '上海制造集团' },
  { orderNo: 'PO202402010003', supplierName: '广州贸易公司' }
])

// 仓库选项
const warehouseOptions = ref([
  { id: 1, name: '主仓库' },
  { id: 2, name: '分仓库A' },
  { id: 3, name: '分仓库B' }
])

// 计算入库总金额
const totalAmount = computed(() => {
  return form.items.reduce((total, item) => total + (item.amount || 0), 0)
})

// 获取状态类型
const getStatusType = (status: string) => {
  const types = {
    pending: 'warning',
    partial: 'primary',
    completed: 'success',
    cancelled: 'danger'
  }
  return types[status] || 'info'
}

// 获取状态标签
const getStatusLabel = (status: string) => {
  const labels = {
    pending: '待入库',
    partial: '部分入库',
    completed: '已入库',
    cancelled: '已取消'
  }
  return labels[status] || '未知'
}

// 获取质检状态类型
const getQualityStatusType = (status: string) => {
  const types = {
    pending: 'info',
    pass: 'success',
    fail: 'danger',
    partial: 'warning'
  }
  return types[status] || 'info'
}

// 获取质检状态标签
const getQualityStatusLabel = (status: string) => {
  const labels = {
    pending: '待质检',
    pass: '合格',
    fail: '不合格',
    partial: '部分合格'
  }
  return labels[status] || '未知'
}

// 生成入库单号
const generateInboundNo = () => {
  const date = new Date()
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0')
  return `IN${year}${month}${day}${random}`
}

// 获取入库单列表
const getInboundList = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    const mockData = [
      {
        id: 1,
        inboundNo: 'IN202401150001',
        orderNo: 'PO202401150001',
        supplierId: 1,
        supplierName: '北京科技有限公司',
        totalAmount: 15000,
        status: 'completed',
        qualityStatus: 'pass',
        warehouseId: 1,
        warehouseName: '主仓库',
        handler: '张三',
        inboundDate: '2024-01-16',
        createUser: '李四',
        createTime: '2024-01-16 09:30:00',
        remark: '质量良好',
        items: [
          {
            productCode: 'P001',
            productName: '笔记本电脑',
            specification: '15寸',
            unit: '台',
            orderQuantity: 3,
            inboundQuantity: 3,
            unitPrice: 5000,
            amount: 15000,
            qualityStatus: 'pass',
            qualityRemark: '外观完好，功能正常'
          }
        ]
      },
      {
        id: 2,
        inboundNo: 'IN202401200001',
        orderNo: 'PO202401200002',
        supplierId: 2,
        supplierName: '上海制造集团',
        totalAmount: 6400,
        status: 'partial',
        qualityStatus: 'partial',
        warehouseId: 1,
        warehouseName: '主仓库',
        handler: '王五',
        inboundDate: '2024-01-21',
        createUser: '赵六',
        createTime: '2024-01-21 14:20:00',
        remark: '部分商品有轻微瑕疵',
        items: [
          {
            productCode: 'P002',
            productName: '办公桌',
            specification: '1.2m',
            unit: '张',
            orderQuantity: 10,
            inboundQuantity: 8,
            unitPrice: 800,
            amount: 6400,
            qualityStatus: 'partial',
            qualityRemark: '2张有轻微划痕'
          }
        ]
      },
      {
        id: 3,
        inboundNo: 'IN202402010001',
        orderNo: 'PO202402010003',
        supplierId: 3,
        supplierName: '广州贸易公司',
        totalAmount: 1800,
        status: 'pending',
        qualityStatus: 'pending',
        warehouseId: 2,
        warehouseName: '分仓库A',
        handler: '孙七',
        inboundDate: '2024-02-02',
        createUser: '周八',
        createTime: '2024-02-02 10:15:00',
        remark: '待质检',
        items: [
          {
            productCode: 'P003',
            productName: '打印机',
            specification: 'A4',
            unit: '台',
            orderQuantity: 1,
            inboundQuantity: 1,
            unitPrice: 1200,
            amount: 1200,
            qualityStatus: 'pending',
            qualityRemark: ''
          },
          {
            productCode: 'P004',
            productName: '办公椅',
            specification: '人体工学',
            unit: '把',
            orderQuantity: 1,
            inboundQuantity: 1,
            unitPrice: 600,
            amount: 600,
            qualityStatus: 'pending',
            qualityRemark: ''
          }
        ]
      }
    ]
    
    inboundList.value = mockData
    pagination.total = mockData.length
  } catch (error) {
    ElMessage.error('获取入库单列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.currentPage = 1
  getInboundList()
}

// 重置搜索
const handleReset = () => {
  Object.assign(searchForm, {
    inboundNo: '',
    orderNo: '',
    supplierId: '',
    status: '',
    dateRange: []
  })
  handleSearch()
}

// 新增入库单
const handleAdd = () => {
  dialogTitle.value = '新建入库单'
  Object.assign(form, {
    id: null,
    inboundNo: generateInboundNo(),
    orderNo: '',
    supplierName: '',
    warehouseId: '',
    inboundDate: '',
    handler: '',
    remark: '',
    items: []
  })
  dialogVisible.value = true
}

// 编辑入库单
const handleEdit = (row: any) => {
  dialogTitle.value = '编辑入库单'
  Object.assign(form, { ...row })
  dialogVisible.value = true
}

// 查看入库单详情
const handleView = (row: any) => {
  currentInbound.value = row
  detailDialogVisible.value = true
}

// 确认入库
const handleConfirm = async (row: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要确认入库单 "${row.inboundNo}" 吗？`,
      '确认入库',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }
    )
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    ElMessage.success('确认入库成功')
    getInboundList()
  } catch (error) {
    // 用户取消
  }
}

// 质检管理
const handleQuality = (row: any) => {
  currentInbound.value = row
  Object.assign(qualityForm, {
    inspector: '',
    inspectionDate: '',
    result: 'pass',
    remark: '',
    items: row.items.map(item => ({
      ...item,
      qualityStatus: item.qualityStatus || 'pending',
      qualityRemark: item.qualityRemark || ''
    }))
  })
  qualityDialogVisible.value = true
}

// 采购订单变更
const handleOrderChange = (orderNo: string) => {
  const order = orderOptions.value.find(o => o.orderNo === orderNo)
  if (order) {
    form.supplierName = order.supplierName
    // 模拟获取订单明细
    form.items = [
      {
        productCode: 'P001',
        productName: '笔记本电脑',
        specification: '15寸',
        unit: '台',
        orderQuantity: 3,
        inboundQuantity: 3,
        unitPrice: 5000,
        amount: 15000,
        qualityStatus: 'pending'
      }
    ]
  }
}

// 计算商品金额
const calculateItemAmount = (index: number) => {
  const item = form.items[index]
  item.amount = item.inboundQuantity * item.unitPrice
}

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    
    if (form.items.length === 0) {
      ElMessage.warning('请选择采购订单以获取入库明细')
      return
    }
    
    submitLoading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    ElMessage.success(form.id ? '更新成功' : '创建成功')
    dialogVisible.value = false
    getInboundList()
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    submitLoading.value = false
  }
}

// 提交质检记录
const handleQualitySubmit = async () => {
  qualityLoading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    ElMessage.success('质检记录保存成功')
    qualityDialogVisible.value = false
    getInboundList()
  } catch (error) {
    ElMessage.error('保存质检记录失败')
  } finally {
    qualityLoading.value = false
  }
}

// 关闭对话框
const handleDialogClose = () => {
  formRef.value?.resetFields()
  form.items = []
}

// 分页大小改变
const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  getInboundList()
}

// 当前页改变
const handleCurrentChange = (page: number) => {
  pagination.currentPage = page
  getInboundList()
}

// 组件挂载时获取数据
onMounted(() => {
  getInboundList()
})
</script>

<style scoped>
.purchase-inbound-management {
  padding: 20px;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

.inbound-form .el-select {
  width: 100%;
}

.inbound-details {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fafafa;
}

.total-amount {
  padding: 10px;
  background-color: #f0f9ff;
  border-radius: 4px;
}

.text-green-600 {
  color: #059669;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}
</style>